<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>地址管理</title>

    <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="../css/personal.css" rel="stylesheet" type="text/css">
    <link href="../css/addstyle.css" rel="stylesheet" type="text/css">
    <script src="../AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/distpicker/2.0.6/distpicker.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/distpicker/2.0.6/distpicker.js"></script>
    <script src="../js/Data.js"></script>
</head>

<body>
<!--头 -->
<header>
    <article>
        <div class="mt-logo">
            <!--顶部导航条 -->
            <div class="am-container header">
                <ul class="message-l">
                    <div class="topMessage">
                        <div class="menu-hd" id="AA">
                            <a href="../login.html" target="_top" class="h" id="a1">亲，请登录</a>
                            <a href="../register.html" target="_top" id="a2">免费注册</a>
                        </div>
                    </div>
                </ul>
                <ul class="message-r">
                    <div class="topMessage home">
                        <div class="menu-hd"><a href="../home2.html" target="_top" class="h">商城首页</a></div>
                    </div>
                    <div class="topMessage my-shangcheng">
                        <div class="menu-hd MyShangcheng"><a href="../information.html" target="_top"><i
                                class="am-icon-user am-icon-fw"></i>个人中心</a></div>
                    </div>
                    <div class="topMessage mini-cart">
                        <div class="menu-hd"><a id="mc-menu-hd" href="../myShopCart.html" target="_top"><i
                                class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                                      class="h">0</strong></a>
                        </div>
                    </div>
                    <div class="topMessage favorite">
                        <div class="menu-hd"><a href="#" target="_top"><i
                                class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
                    </div>
                    <div class="topMessage favorite">
                        <div class="menu-hd"><a href="../orderList.html" target="_top"><i
                                class="am-icon-star am-icon-fw"></i><span>个人订单</span></a></div>
                    </div>
                </ul>
            </div>

            <!--悬浮搜索框-->

            <div class="nav white">
                <div class="logoBig">
                    <li><img src="../images/logobig.png"/></li>
                </div>

                <div class="search-bar pr">
                    <a name="index_none_header_sysc" href="#"></a>
                    <form>
                        <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                               autocomplete="off">
                        <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                    </form>
                </div>
            </div>

            <div class="clear"></div>
        </div>
        </div>
    </article>
</header>

<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="#">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> /
                        <small>Address&nbsp;list</small>
                    </div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" id="showAdd">


                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg" id="address">新增地址</strong> /
                                <small id="add1">Add&nbsp;address</small>
                            </div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;" id="user-address-big">
                            <form class="am-form am-form-horizontal" id="user-address-input">

                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name" placeholder="收货人">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" placeholder="手机号必填" type="email">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-address" class="am-form-label">所在地</label>
                                    <div class="am-form-content address" data-toggle="distpicker">
                                        <select id="province">
                                            <!--data-am-selected-->
                                            <!--<option value="a">浙江省</option>-->
                                            <!--<option value="b" selected>湖北省</option>-->
                                        </select>
                                        <select id="city">
                                            <!-- <option value="a">温州市</option>-->
                                            <!--<option value="b" selected>武汉市</option>-->
                                        </select>
                                        <select id="dist">
                                            <!--<option value="a">瑞安区</option>-->
                                            <!-- <option value="b" selected>洪山区</option>-->
                                        </select>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3" id="submit">
                                        <a class="am-btn am-btn-danger" onclick="address()" id="upd" name="a_top">保存</a>
                                        <a href="javascript: void(0)" class="am-close am-btn am-btn-danger" id="cancel"
                                           data-am-modal-close>取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $(".new-option-r").click(function () {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });

                    var $ww = $(window).width();
                    if ($ww > 640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
            </script>

            <div class="clear"></div>

        </div>
        <!--底部-->
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="#">恒望科技</a>
                    <b>|</b>
                    <a href="#">商城首页</a>
                    <b>|</b>
                    <a href="#">支付宝</a>
                    <b>|</b>
                    <a href="#">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="#">关于恒望</a>
                    <a href="#">合作伙伴</a>
                    <a href="#">联系我们</a>
                    <a href="#">网站地图</a>
                    <em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank"
                                                               title="模板之家">模板之家</a> - Collect from <a
                            href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
                </p>
            </div>
        </div>
    </div>

    <aside class="menu">
        <ul>
            <li class="person active">
                <a href="index.html"><i class="am-icon-user"></i>个人中心</a>
            </li>
            <li class="person">
                <p><i class="am-icon-newspaper-o"></i>个人资料</p>
                <ul>
                    <li><a href="../information.html">个人信息</a></li>
                    <li><a href="safety.html">安全设置</a></li>
                    <li><a href="address.html">地址管理</a></li>
                    <li><a href="cardlist.html">快捷支付</a></li>
                </ul>
            </li>
            <li class="person">
                <p><i class="am-icon-balance-scale"></i>我的交易</p>
                <ul>
                    <li><a href="order.html">订单管理</a></li>
                    <li><a href="change.html">退款售后</a></li>
                    <li><a href="comment.html">评价商品</a></li>
                </ul>
            </li>
            <li class="person">
                <p><i class="am-icon-dollar"></i>我的资产</p>
                <ul>
                    <li><a href="points.html">我的积分</a></li>
                    <li><a href="coupon.html">优惠券 </a></li>
                    <li><a href="bonus.html">红包</a></li>
                    <li><a href="walletlist.html">账户余额</a></li>
                    <li><a href="bill.html">账单明细</a></li>
                </ul>
            </li>

            <li class="person">
                <p><i class="am-icon-tags"></i>我的收藏</p>
                <ul>
                    <li><a href="collection.html">收藏</a></li>
                    <li><a href="foot.html">足迹</a></li>
                </ul>
            </li>

            <li class="person">
                <p><i class="am-icon-qq"></i>在线客服</p>
                <ul>
                    <li><a href="consultation.html">商品咨询</a></li>
                    <li><a href="suggest.html">意见反馈</a></li>

                    <li><a href="news.html">我的消息</a></li>
                </ul>
            </li>
        </ul>

    </aside>
</div>

</body>

</html>

<script>
    $(function () {
        showAddress();
        OnDisplay();
    });

    function address() {
        $.ajax({
            url: "http://localhost:8080/shop-api/address",
            type: "Get",
            data: {
                "name": $("#user-name").val(),
                "phone": $("#user-phone").val(),
                "province": $("#province").val(),
                "city": $("#city").val(),
                "dist": $("#dist").val(),
                "address": $("#user-intro").val(),
                "userId": sessionStorage.id
            },
            success: function (data) {
                let Obj = JSON.parse(data);
                let Rcode = Obj.code;
                let Rmsg = Obj.msg;
                let Rdata = Obj.data;
                if (Rcode != 100) {
                    alert(Rmsg);
                    return;
                }
                alert("添加成功！")
                location.reload()
            }
        })
    }


    function showAddress() {
        $.ajax({
            url: "http://localhost:8080/shop-api/showAddress",
            type: "Get",
            data: {"userId": sessionStorage.id},
            success: function (data) {
                let Obj = JSON.parse(data);
                let code = Obj.code;
                let List = Obj.data;
                let msg = Obj.msg;

                if (code === 100) {
                    for (let i = 0; i < List.length; i++) {
                        let listElement = List[i];
                        let stringify = JSON.stringify(listElement);
                        /*console.log("111");
                        console.log(stringify);*/
                        $("#showAdd").append(
                            // "<li class=\"user-addresslist defaultAddr\">"+
                            "<span class=\"new-option-r\"><i class=\"am-icon-check-circle\"></i>默认地址</span>" +
                            "<li class=\"user-addresslist\">\n" +
                            "<span class=\"new-option-r\"><i class=\"am-icon-check-circle\"></i>设为默认</span>\n" +
                            "<p class=\"new-tit new-p-re\">\n" +
                            "<span class=\"new-txt\">" + List[i].name + "</span>\n" +
                            "<span class=\"new-txt-rd2\">" + List[i].phone + "</span>\n" +
                            "</p>\n" +
                            "<div class=\"new-mu_l2a new-p-re\">\n" +
                            "<p class=\"new-mu_l2cw\">\n" +
                            "<span class=\"title\">地址：</span>\n" +
                            "<span class=\"province\">" + List[i].province + "</span>省\n" +
                            "<span class=\"city\">" + List[i].city + "</span>市\n" +
                            "<span class=\"dist\">" + List[i].dist + "</span>区\n" +
                            "<span class=\"street\">" + List[i].address + "</span></p>\n" +
                            "</div>\n" +
                            "<div class=\"new-addr-btn\">\n" +
                            "<a href=\"#a_top\" onclick=compile(" + stringify + ")><i class=\"am-icon-edit\"></i>编辑</a>\n" +
                            "<span class=\"new-addr-bar\">|</span>\n" +
                            "<a  href=\"javascript:void(0);\" onclick=\"delClick(" + List[i].id + ");\"><i class=\"am-icon-trash\"></i>删除</a>\n" +
                            "</div>\n" +
                            "</li>")
                    }
                }
            }
        })
    }


    function delClick(id) {
        console.log(id);
        $.ajax({
            url: "http://localhost:8080/shop-api/delAddress",
            type: "Post",
            data: {"userId": sessionStorage.id, "id": id},
            success: function (data) {
                let Obj = JSON.parse(data);
                let Rcode = Obj.code;
                let Rmsg = Obj.msg;
                let Rdata = Obj.data;
                if (Rcode === 101) {
                    alert(Rmsg);
                    return;
                }
                alert("删除成功！");
                location.reload()
            }
        })
    }


    function compile(stringify) {
        $("#address").html("修改地址");
        $("#add1").html("Update&nbsp;address");
        $("#user-name").val(stringify.name);
        $("#user-phone").val(stringify.phone);
        $("#province").val(stringify.province);
        // $("#city").val(stringify.city);
        $("#province").trigger("change");
        $("#city").find("[data-text="+stringify.city+"]").attr("selected",true);
        $("#city").trigger("change");
        $("#dist").find("[data-text="+stringify.dist+"]").attr("selected",true);
        // $("#dist").val(stringify.dist);
        $("#user-intro").val(stringify.address);
        /*console.log(stringify.city);
        console.log($("#city").val())
        console.log($("#dist").val())*/


        $("#upd").remove();
        $("#cancel").remove();
        $("#submit").append("<a class=\"am-btn am-btn-danger\" onclick=\"update("+stringify.id+")\" id=\"upd\" name=\"a_top\">修改</a>\n" +
            "<a href=\"javascript: void(0)\" class=\"am-close am-btn am-btn-danger\" id=\"cancel\"\n" +
            "data-am-modal-close>取消</a>");
    }


    function update(id) {
        console.log(id);
        $.ajax({
            url: "http://localhost:8080/shop-api/updateAddress",
            type: "Post",
            data: {
                "name": $("#user-name").val(),
                "phone": $("#user-phone").val(),
                "province": $("#province").val(),
                "city": $("#city").val(),
                "dist": $("#dist").val(),
                "address": $("#user-intro").val(),
                "userId": sessionStorage.id,
                "id":id
            },
            success: function (data) {
                let Obj = JSON.parse(data);
                let Rcode = Obj.code;
                let Rmsg = Obj.msg;
                let Rdata = Obj.data;
                if (Rcode === 101) {
                    alert(Rmsg);
                    return;
                }
                alert("修改成功！");
                location.reload()
            }
        })
    }
</script>